<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兄弟选择器</title>
    <style>
      /* 和div相邻的那个p标签（只向下看） */
      div+p {
        color: skyblue;
      }
      /* div的下面的所有兄弟p标签 */
      div~p {
        color: green;
      }
      /* 用法:主页的导航只有主页这个不变色 */
      li+li {
        color: orange;
      }

      li~li {
        color: gold;
      }
    </style>
</head>
<body>
  <div>百家姓</div>
  <p>赵</p>
  <p>钱</p>
  <p>孙</p>
  <p>李</p>
  <ul>
    <li>主页</li>
    <li>秒杀</li>
    <li>订单</li>
    <li>我的</li>
  </ul>
</body>
</html>